<template>
  <div class="chat">
    <ul class="chatUl">
      <li>
        <i class="iconfont">&#xec2e;</i
        ><span>您好！很高兴为您服务~请问有什么可以帮到您的吗？</span>
      </li>
      <li class="myTEXT" v-for="i in data" :key="i.id">
        <span v-text="i.message"></span><i class="my-header">我</i>
      </li>
    </ul>
    <section>
      <b>请输入</b
      ><input
        type="text"
        class="chat-input"
        v-model="value"
        placeholder="内容"
        @keydown.enter="chatSend"
      /><button @click="chatSend">发送</button>
    </section>
  </div>
</template>

<script>
export default {
  name: 'chat',
  data() {
    return {
      value: '',
      chatValue: '',
      data: [],
      id: 1,
      name: '',
    }
  },
  methods: {
    chatSend() {
      // this.value
      if (!this.value) {
        return
      }
      this.data.push({
        id: ++this.id,
        message: this.value,
      })
      this.value = ''
    },
  },
  // refresh() {
  //   const user = JSON.parse(localStorage.getItem('user')) || []
  //   const persona = JSON.parse(localStorage.getItem('personalCenter')) || []
  //   console.log(user)
  //   console.log(persona)

  // const res = user.find((item) => {
  //   return item.telephone === persona.value
  // })
  // if (res) {
  //   const res = user.find((item) => {
  //     return item.telephone === persona.value
  //   })
  //   console.log(res)
  //   this.name = res.VIPname.splice(0, 1)
  //   console.log(this.name)
  // } else {
  //   this.name = '陌生'
  // }
  // },
}
</script>

<style lang="scss" scoped>
@font-face {
  font-family: "iconfont"; /* Project id 3284892 */
  src: url("//at.alicdn.com/t/font_3284892_474j9qeppa3.woff2?t=1648707439233")
      format("woff2"),
    url("//at.alicdn.com/t/font_3284892_474j9qeppa3.woff?t=1648707439233")
      format("woff"),
    url("//at.alicdn.com/t/font_3284892_474j9qeppa3.ttf?t=1648707439233")
      format("truetype");
}
.iconfont {
  font-family: "iconfont" !important;
  font-size: 16px;
  font-style: normal;
  -webkit-font-smoothing: antialiased;
  -webkit-text-stroke-width: 0.2px;
  -moz-osx-font-smoothing: grayscale;
}
.chat {
  width: 100%;
  height: 100%;
  display: flex;
  flex-direction: column;
  position: relative;
  overflow-x: hidden;
  > ul {
    width: 100%;
    flex: 1;
    .myTEXT {
      padding-left: 60px;
      > span {
        float: right;
        text-align: right;
      }
    }
    > li {
      width: 100%;
      box-sizing: border-box;
      font-size: 12px;
      margin: 8px 0;
      display: flex;
      .iconfont {
        display: block;
        width: 50px;
        height: 50px;
        font-size: 25px;
        line-height: 50px;
        text-align: center;
        border-radius: 50%;
        background-color: #ddd;
      }

      .my-header {
        display: block;
        width: 50px;
        height: 50px;
        font-size: 18px;
        line-height: 50px;
        text-align: center;
        border-radius: 50%;
        background-color: #ddd;
        font-style: normal;
      }
      > span {
        flex: 1;
        margin-left: 10px;
        line-height: 50px;
        // font-size: 14px;
      }
    }
  }
  > section {
    width: 100%;
    height: 50px;
    display: flex;
    flex-wrap: wrap;
    position: fixed;
    bottom: 60px;
    > b {
      display: block;
      width: 40px;
      height: 50px;
      line-height: 50px;
      font-weight: 400;
      margin: 0 5px;
    }
    .chat-input {
      flex: 1;
      border: none;
      background-color: #ddd;
      border-radius: 20px;
      padding-left: 8px;
    }
    > button {
      width: 90px;
      border-radius: 20px;
      background-color: rgb(100, 189, 248);
      border: none;
    }
  }
}
</style>
